<template>
  <div class="scroll-wrapper" @scroll="remmeberPos" ref="scrollList">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div
        class="article_item"
        v-for="item in list"
        :key="item.art_id"
        @click="$router.push(`/article/${item.art_id}`)"
      >
        <h3 class="van-ellipsis">{{ item.title }}</h3>
        <div class="img_box" v-if="item.cover.type">
          <van-image
            :class="item.cover.type === 1 ? 'w100' : 'w33'"
            v-for="(image, index) in item.cover.images"
            fit="cover"
            :src="image"
            :key="index"
            lazy-load
          >
            <template #loading>
              <van-loading type="spinner" size="20" />
            </template>
          </van-image>
        </div>
        <div class="info_box">
          <span>{{ item.aut_name }}</span>
          <span>{{ item.comm_count }}评论</span>
          <span>{{ item.pubdate | dateFrom }}</span>
          <span class="close" @click="moreActione(item.art_id)"
            ><van-icon name="cross"></van-icon
          ></span>
        </div>
      </div>
    </van-list>
    <More v-model="show" :artId="artId" @dislike-art="delArt" />
  </div>
</template>

<script>
import { getArticleListApi } from '@/api/home'
import More from './more.vue'
export default {
  components: {
    More
  },
  props: {
    channelId: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      artId: '',
      show: false,
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      params: { channel_id: this.channelId, timestamp: Date.now() },
      scrollTop: 0
    }
  },
  activated () {
    this.$refs.scrollList.scrollTop = this.scrollTop
  },
  methods: {
    delArt () {
      const index = this.list.findIndex(item => item.art_id === this.artId)
      this.list.splice(index, 1)
      this.show = false
    },
    moreActione (id) {
      this.show = true
      this.artId = id
      console.log(this.artId)
    },
    remmeberPos (e) {
      this.scrollTop = e.target.scrollTop
    },
    async onLoad () {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      const { data } = await getArticleListApi(this.params)
      this.list.push(...data.results)

      // 加载状态结束
      this.loading = false

      // 数据全部加载完成
      if (!this.params.timestamp) {
        this.finished = true
      } else {
        this.params.timestamp = data.pre_timestamp
      }
    },
    onRefresh () {
      this.finished = false
      this.loading = true
      this.onLoad()
    }
  }
}
</script>

<style lang="less" scoped>
.article_item {
  h3 {
    font-weight: normal;
    line-height: 2;
  }
  .img_box {
    display: flex;
    justify-content: space-between;
    .w33 {
      width: 33%;
      height: 90px;
    }
    .w100 {
      width: 100%;
      height: 180px;
    }
  }
  .info_box {
    color: #999;
    line-height: 2;
    position: relative;
    font-size: 12px;
    span {
      padding-right: 10px;
      &.close {
        border: 1px solid #ddd;
        border-radius: 2px;
        line-height: 15px;
        height: 12px;
        width: 16px;
        text-align: center;
        padding-right: 0;
        font-size: 8px;
        position: absolute;
        right: 0;
        top: 7px;
      }
    }
  }
}
</style>
